<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>黄林-zol商城</title>
	<script type="text/javascript" src="src/js/jquery-2.1.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery plug-in/bootstrap-3.3.0/dist/css/bootstrap.min.css"/>
	<!--图标插件-->
	<link rel="stylesheet" type="text/css" href="jquery plug-in/font-awesome-4.6.3/css/font-awesome.min.css"/>
	<script type="text/javascript" src="src/js/index.js/index.js"></script>
	<link rel="stylesheet" type="text/css" href="src/css/index.css/index.css"/>
	<script type="text/javascript" src="jquery plug-in/bootstrap-3.3.0/dist/js/bootstrap.min.js"></script>
	
	<!--cookie插件-->
	<script type="text/javascript" src="jquery plug-in/carhartl-jquery-cookie-92b7715/jquery.cookie.js"></script>
	<!--小图片轮播插件-->
	<link rel="stylesheet" type="text/css" href="jquery plug-in/Swiper-3.3.1/dist/css/swiper.min.css"/>
	<script type="text/javascript" src="jquery plug-in/Swiper-3.3.1/dist/js/swiper.min.js"></script>
</head>
<body>
	<!--头部-->
	<div class="zc-topbar">
		<div class="wrapper">
			<!--登录信息-->
			<div class="login-info">
				<span class="zc-index"><a href="http://127.0.0.1:8020/zol/index.html" target="_blank">商城首页</a></span>
				<span class="zc-login-left">Hi~欢迎来到ZOL商城，请<a href="zc-login.html" target="_blank">登录</a></span>
				<span class="zc-register"><a href="zc-register.html" target="_blank">免费注册</a></span>
			</div>
			<!--快速导航-->
			<div class="quick-menu">
				<ul>
					<!--这里的href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好。-->
					<li><a href="javascript:;" class="change-color">我的订单</a></li>
					<li><a href="javascript:;" class="change-right">买家中心</a><i class="fa fa-angle-down"></i></li>
					<li><a href="javascript:;"  class="change-color" id="car">购物车0件</a></li>
					<li><a href="javascript:;" class="change-color">帮助中心</a></li>
					<li><a href="javascript:;"></a>｜</li>
					<li><a href="javascript:;" class="change-right"><span><img src="src/images/index/model-icon.jpg"/></span>手机商城</a><i class="fa fa-angle-down"></i></li>
					<li><a href="javascript:;" class="change-color">中关村在线</a></li>
					<li><a href="javascript:;" class="change-color">商家入驻</a></li>
					<li><a href="javascript:;" class="change-right">联系客服</a><i class="fa fa-angle-down"></i></li>
				</ul>
				<!--买家中心-->
				<div class="Buyer-Center-show">
					<a href="javascript:;">关注的店铺<span> 30</span></a><br />
					<a href="javascript:;">关注的商品<span> 47</span></a>
				</div>
				<!--手机商城-->
				<div class="Mobile-phone-mall"><img src="src/images/index/QR code.png"/></div>
				
				<!--联系客服-->
				<div class="Notescontact">400-678-0068</div>
			</div>
		</div>
	</div>
	
	<!--end-->
	<!--清除上面所有浮动-->
	<div class="clear" style="clear: both;"></div>
	
	<!--搜索-->
	<div id="header-search">
		<!--logo-->
		<div class="logo"><a href="http://127.0.0.1:8020/zol/index.html" target="_blank"><img src="src/images/index/logo.png"/></a></div>
		
		<!--搜索部分-->
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">搜&nbsp;索</span>
			<!--热搜-->
			<div class="hot-search">
				<a href="http://www.zol.com/index.php?c=List&amp;keyword=%C8%FD%D0%C7+GALAXY+S7+Edge&amp;spm=921&amp;spm=914" target="_blank" title="三星s7 Edge">三星s7 Edge</a>
				<a href="http://www.zol.com/list/pro404275.html?spm=914" target="_blank" title="华为P9">华为P9</a>
				<a href="http://tuan.zol.com/index.php?c=List&amp;a=SingleTuan&amp;cateId=1&amp;subId=3&amp;spm=914" target="_blank" title="戴尔小XPS仅4999！">戴尔小XPS仅4999！</a>
				<a href="http://www.zol.com/vga/list/c1_s6_m413_pms6887.html?spm=914" target="_blank" title="GTX1060">GTX1060</a>
				<a href="http://www.zol.com/index.php?c=List&amp;keyword=%BE%C5%D1%F4%B6%B9%BD%AC%BB%FA&amp;spm=921&amp;spm=914" target="_blank" title="九阳豆浆机直降100！">九阳豆浆机直降100！</a>
				<a href="http://www.zol.com/index.php?c=List&amp;str=o3&amp;keyword=%BB%FA%D0%B5%BC%FC%C5%CC&amp;spm=914" target="_blank" title="热销机械键盘">热销机械键盘</a>
			</div>
		</div>
		<!--全国联保-->
		<div class="ad-div">
			<a href="javascript:;"><img src="src/images/index/joint guarantee.png" /></a>	
		</div>
	</div>
	<!--清除上面所有浮动-->
	<div class="clear" style="clear: both;"></div>
	<!--end-->
	<!--导航栏主体-->
	<div id="nav-box">
		<!--左侧-->
		<div class="nav-left">
			<h4>商品分类</h4>
			<div class="vategroy-menu-nav">
				<ul>
					<li><img src="src/images/index/icon-1.png"/><a href="http://shouji.zol.com/?spm=625.34430" target="_blank">手机通讯 /</a><a href="http://www.zol.com/list/c1000.html?spm=625.34265" target="_blank">手机配件</a></li>
					<li><img src="src/images/index/icon-2.png"/><a href="http://www.zol.com/index.php?c=List&amp;keyword=%B1%CA%BC%C7%B1%BE&amp;spm=920" target="_blank">笔记本 /</a><a href="http://www.zol.com/mid/list/c69_s702.html?spm=626.34266" target="_blank">平板/</a><a href="http://www.zol.com/desktop_pc/list/c2_s27.html?spm=626.34118" target="_blank">品牌整机</a></li>
					<li><img src="src/images/index/icon-3.png"/><a href="http://www.zol.com/digital_camera/list/c35_s15.html?spm=627.34268" target="_blank">摄影摄像/</a><a href="http://www.zol.com/list/c1003.html?spm=627.34115" target="_blank">数码配件</a></li>
					<li><img src="src/images/index/icon-4.png"/><a href="http://www.zol.com/zsyxj/list/c58.html?spm=628.34269" target="_blank">游戏电玩 /</a><a href="http://www.zol.com/index.php?c=List&amp;keyword=%D3%CE%CF%B7%B1%BE&amp;do_search=%CB%D1%CB%F7&amp;zp-search-type=1&amp;spm=628.34121" target="_blank">游戏本</a></li>
					<li><img src="src/images/index/icon-5.png"/><a href="http://diy.zol.com/?spm=629.34431" target="_blank">DIY硬件 /</a><a href="http://www.zol.com/move_disk/list/c10_s274.html?spm=629.34272" target="_blank">外设配件</a></li>
					<li><img src="src/images/index/icon-6.png"/><a href="http://www.zol.com/IntelligentBracelet/list/c84.html?spm=630.34432" target="_blank">智能生活 /</a><a href="http://www.zol.com/index.php?c=List&amp;str=c10&amp;spm=630.34129" target="_blank">智能设备</a></li>
					<li><img src="src/images/index/icon-7.png"/><a href="http://www.zol.com/index.php?c=List&amp;str=c73&amp;spm=631.38627" target="_blank">家用设备 /</a><a href="http://www.zol.com/zsyxj/list/c3.html?spm=631.34131" target="_blank">办公设备</a></li>
					<li id="li-last"><img src="src/images/index/icon-8.png"/><a href="http://www.zol.com/index.php?c=List&amp;str=c74&amp;spm=632.42165" target="_blank">生活电器 /</a><a href="http://www.zol.com/index.php?c=List&amp;str=c53&amp;spm=632.42153" target="_blank">个护/</a><a href="http://www.zol.com/index.php?c=List&amp;str=c42&amp;spm=632.42151" target="_blank">家用电器</a></li>
				</ul>
			</div>
			<div class="updata">
				<a href="http://tuan.zol.com/index.php?c=List&amp;a=TodayTuan&amp;cateId=1&amp;subId=1&amp;spm=625.34430" target="_blank"><img width="201" height="70" src="src/images/index/time limit.gif" alt="特惠限时抢"></a>
			</div>
		</div>
		<!--左侧商品导航隐藏显示-->
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<div class="nav-left-hide">
			<p><img src="src/images/index/service-assurance.png"/><img src="src/images/index/nav-show.png"/></p>
		</div>
		<!--右侧-->
		<div class="nav-right">
			<div class="nav-right-top">
				<span style="color: rgb(255,95,133);">首页</span>
				<span>团购</span>
				<span>手机馆</span>
				<span>智能之家</span>
				<span>DIY赞机馆</span>
				<span>限时抢购</span>
				<a href="http://www.zol.com/detail/cell_phone/apple/28635466.html?spm=625.34430" target="_blank">苹果 iPhone 7 新品发售 5388元！</a>
			</div>
			<!--轮播图-->
			<div class="nav-right-center">
				<div id="igs">
					<img src="src/images/index/Carousel1.png" class="ig"/>
					<img src="src/images/index/Carousel2.png" class="ig"/>
					<img src="src/images/index/Carousel3.png" class="ig"/>
				</div>
				<div class="btn btn1">&lt;</div><div class="btn btn2">&gt;</div>
	
				<div id="tabs">
					<div class="tab bg">1</div>
					<div class="tab">2</div>
					<div class="tab">3</div>
				</div>
			</div>
			<div class="nav-right-r">
				<div class="nav-right-r-assurance"><img src="src/images/index/service assurance.png"/></div>
				<dl>
					<dt>商城公告</dt>
					<dd><a href="http://www.zol.com/shop_191101/s626_m0_0_0_0_p1.html?spm=625.34430" target="_blank">[热销]多款固态硬盘促销进行时！</a></dd>
					<dd><a href="http://www.zol.com/detail/cell_phone/apple/28635466.html?spm=625.34430" target="_blank">[新品]苹果 iPhone 7 现货5388元！</a></dd>
					<dd><a href="http://tuan.zol.com/26260.html?spm=625.34430" target="_blank">[省千元]联想710S 256G版4499元！</a></dd>
					<dd><a href="http://www.zol.com/vga/list/c1_s6_m413_pms6887.html?spm=625.34430" target="_blank">[现货]1060甜品级显卡热卖 ！</a></dd>
					<dd><a href="http://tuan.zol.com/index.php?c=List&amp;a=TuanSearch&amp;searchName=%D6%F7%BB%FA&amp;spm=625.34430" target="_blank">[福利]升级多多！小编攒机福利！</a></dd>
				</dl>
			</div>
		</div>
	</div>
	
	<!--清除上面所有浮动-->
	<div class="clear" style="clear: both;"></div>
	<!--商品内容-->
	<div id="wrapper">
		
		<!--精品团购-->
		<div class="boutique-Group-buying">
			<div id="boutique-Group-buying-top">
				<h2>精品团购</h2>
				<a href="http://tuan.zol.com/?spm=625.34430" target="_blank">更多团购</a>
			</div>
			<div id="z-tuan-list">
				<ul>
					<li><img src="src/images/index/MX6.png"/></li>
					<li><img src="src/images/index/7000.png"/></li>
					<li><img src="src/images/index/5X.png"/></li>
					<li><img src="src/images/index/70D.png"/></li>
				</ul>
			</div>
		</div>
		
		<!--特色购-->
		
		<div id="features-and-purchasing">
			<div><h2>特色购</h2></div>
			<ul>
				<li class="list-1"><img src="src/images/index/S7.png"/></li>
				<li class="list-2"><img src="src/images/index/PR06.png"/></li>
				<li class="list-3"><img src="src/images/index/TRS2.png"/></li>
				<li class="list-4"><img src="src/images/index/mini.png"/></li>
				<li class="list-5"><img src="src/images/index/LT-Z09.png"/></li>
				<li class="list-6"><img src="src/images/index/360QK.png"/></li>
				<li class="list-7"><img src="src/images/index/ILCE.png"/></li>
				<li class="list-8"><img src="src/images/index/I3.png"/></li>
				<li class="list-9"><img src="src/images/index/B-S.png"/></li>
			</ul>
		</div>
		<!--清除上面所有浮动-->
		<div class="clear" style="clear:both;"></div>
		<!--1F 手机通讯-->
		<div id="onef-list">
			<div class="list-top">
				<span>1F 手机通讯</span>
				<ul>
					<li>华为</li>
					<li>｜</li>
					<li>苹果</li>
					<li>｜</li>
					<li>三星</li>
					<li>｜</li>
					<li>魅族</li>
					<li>｜</li>
					<li>oppo</li>
					<li>｜</li>
					<li>小米</li>	
				</ul>
			</div>
			<!--1F 手机通讯 手机列表-->
			<div id="model-list">
				<div class="main-model">
					<img src="src/images/index/AXON.png"/>
				</div>
				<ul>
					<li class="model-list1">
						<div class="swiper-container">
						  <div class="swiper-wrapper">
						    <div class="swiper-slide"><img src="src/images/index/360F4.png"/></div>
						    <div class="swiper-slide"><img src="src/images/index/MLE.png"/></div>
						    <div class="swiper-slide"><img src="src/images/index/OPR9.png"/></div>
						  </div>
						  <!--分页器 -->
						  <div class="swiper-pagination"></div>

						    <!--导航按钮 -->
						   <div class="swiper-button-prev"></div>
						   <div class="swiper-button-next"></div>
						</div>
						<!--商品列表的小图片轮播-->
						<script> 
							var mySwiper = new Swiper('.swiper-container', {
//								autoplay: 3000,//可选选项，自动滑动
								direction: 'horizontal',
							    loop: true,
							    //分页器
							    pagination: '.swiper-pagination',
							    //点击小圆点切换图片
							    paginationClickable:true,
							    slideToClickedSlide:true,
							    
							    //前进后退按钮
							    nextButton: '.swiper-button-next',
							    prevButton: '.swiper-button-prev',
							});
							setInterval("mySwiper.slidePrev()",3000);
						</script>
						<!--轮播end-->
					</li>
					
					<li class="model-list2">
						<p class="hover">魅蓝Note 3 全网通</p>
						<p class="red">金属机身+指纹 价格新低</p>
						<img src="src/images/index/MLNOte3.png"/>
					</li>
					<li class="model-list2">
						<p class="hover">三星C5 全网通</p>
						<p class="red">家属一体机身 限时低价</p>
						<img src="src/images/index/C5.png"/>
					</li>
					<li class="model-list2">
						<p class="hover">360手机 N4S</p>
						<p class="red">4G+64G 仅售1449</p>
						<img src="src/images/index/N4S.png"/>
					</li>
					<li class="model-list2">
						<p class="hover">酷派cool1(全网通)</p>
						<p class="red">32G内存 仅售1089元</p>
						<img src="src/images/index/cool1.png"/>
					</li>
					<li class="model-list2">
						<p class="hover">一加3 6GB运存</p>
						<p class="red">稀有现货 限时促销</p>
						<img src="src/images/index/one3.png"/>
					</li>
					<li class="model-list2">
						<p class="hover">TCL750 5.2英寸 32GB</p>
						<p class="red">双卡双待 仅售1399元</p>
						<img src="src/images/index/TCL750.png"/>
					</li>
				</ul>
			</div>
			<!--各种品牌手机logo-->
			<ul id="phone-logo">
				<li><img src="src/images/index/ihpone.png"/></li>
				<li><img src="src/images/index/HUAWEI.png"/></li>
				<li><img src="src/images/index/LESHI.png"/></li>
				<li><img src="src/images/index/oppo.png"/></li>
				<li><img src="src/images/index/coolpand.png"/></li>
				<li><img src="src/images/index/MEIZU.png"/></li>
				<li><img src="src/images/index/SONY.png"/></li>
				<li><img src="src/images/index/SAMSUNG.png"/></li>
				<li><img src="src/images/index/lenovo.png"/></li>
			</ul>
		</div>
		<!--雷蛇鼠标键盘-->
		<div class="razer"><img src="src/images/index/leishe.png"/></div>
		
		<!--一元夺宝-->
		<div id="oney">
			<img src="src/images/index/oneyuan.png"/>
		</div>
		<!--一元夺宝商品-->
		<div id="one-list">
			<ul class="one-list-fir">
				<li><img src="src/images/index/iphone7 plus128G.png"/></li>
				<li><img src="src/images/index/VH200.png"/></li>
				<li><img src="src/images/index/Mac.png"/></li>
				<li><img src="src/images/index/iphone7 plus32G.png"/></li>
				<li><img src="src/images/index/5D.png"/></li>
				<li><img src="src/images/index/iphone7 plus32G.png"/></li>
			</ul>
			<ul  class="one-list-lar">
				<li><img src="src/images/index/saomiao.png"/></li>
				<li><img src="src/images/index/saomiao.png"/></li>
				<li><img src="src/images/index/saomiao.png"/></li>
				<li><img src="src/images/index/saomiao.png"/></li>
				<li><img src="src/images/index/saomiao.png"/></li>
				<li><img src="src/images/index/saomiao.png"/></li>
			</ul>
		</div>
	</div>
	
	<!--商品内容结束-->
	
	<!--右边导航条-->
	<div id="nav-fix">
		<div class="shop-b">
			<img src="src/images/index/fa-shop-b.png"/>
		</div>
		<div class="shop-d">
			<img src="src/images/index/fa-shop-d.png"/>
		</div>
		<div class="shop-car">
			<img src="src/images/index/fa-shop-car.png"/>
		</div>
		<div class="shop-y">
			<img src="src/images/index/fa-shop-y.png"/>
		</div>
		<!--回到顶部-->
		<div class="to-top">
			<p>建议</p>
			<p>反馈</p>
			<p class="changered">∧</p>
		</div>
	</div>
	<!--清除上面所有浮动-->
	<div class="clear" style="clear:both;"></div>
	
	<!--引入页脚-->
	<div id="footer-introduce">
		
	</div>
</body>
</html>
